<template>
  <div style="display: none">
    <div id="printMe">
      <div
        style="
          position: relative;
          padding-left: 15px;
          padding-top: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
        "
        v-for="item in multipleSelection"
        :key="item.washCode"
      >
        <div style="font-size: 12px; line-height: 14px;margin-left: 15px;">
          <div style="font-size: 10px; font-weight: bold; margin-bottom: 5px">
            <span>刷鞋匠货架号：</span>
            <span style="font-size: 30px; font-weight: bold">{{
              item.srgCode
            }}</span>
          </div>
          <div style="margin-bottom: 5px">
            <span>手机号码：</span>
            <span>{{ item.phone }}</span>
          </div>
          <div v-if="item.index" style="margin-bottom: 5px">
            <span>排序：</span>
            <span style="font-size: 16px; font-weight: bold">{{
              item.index
            }}</span>
          </div>
          <div style="margin-top: 5px">
            <span style="font-weight: bold">水洗码：</span>
            <span style="font-size: 16px; font-weight: bold">{{
              item.washCode
            }}</span>
          </div>
        </div>
        <BarCode :washCode="item.washCode" />
      </div>
    </div>

    <button ref="printBtn" v-print="printObj"></button>
  </div>
</template>

<script>
import BarCode from "./BarCode.vue";
export default {
  name: "PrintWashCodeTwo",
  props: ["multipleSelection"],
  components: {
    BarCode,
  },
  data() {
    return {
      printObj: {
        id: "printMe",
        popTitle: "水洗码",
      },
      printTime: "",
    };
  },
};
</script>
